<template>
  <section>
    <div class="head">
      <i class="iconfont" @click="get">&#xe64b;</i>
      <span>会员中心</span>
    </div>
    <div class="Kjk">
      <span>为账户Kjk购买会员</span>
    </div>
    <router-link class="col-xs-12" :to="{name:'Privilege'}">
      <span>会员特权</span>
      <div class="i">
        <span>会员说明</span> <i class="iconfont1">&#xe643;</i>
      </div>
    </router-link>
    <div class="sOne">
      <i class="iconfont2">&#xe63e;</i>
      <span>减免配送费</span> <br>
      <span>每月减免30单，每日可减免3单，每单最高减4元</span> <br>
      <span>蜂鸟专送专项</span>
    </div>
    <div class="sTwo">
      <i class="iconfont2">&#xe729;</i>
      <span>减免配送费</span> <br>
      <span>每月减免30单，每日可减免3单，每单最高减4元</span> <br>
      <span>蜂鸟专送专项</span>
    </div>
    <div class="kai">
      <p>开通会员</p>
    </div>
    <div class="yue">
      <span class="oneS">一个月</span>
      <span>
      <i class="iconfont3">&#xe605;</i>
        <span>20</span>
    </span>
     <router-link :to="{name:'payment'}"><button class="btn">购买</button></router-link>
    </div>
    <router-link class="col-xs-12" :to="{name:'ExchangeMem'}">
      <span>兑换会员</span>
      <div class="i">
        <span>使用卡号卡密</span> <i class="iconfont1">&#xe643;</i>
      </div>
    </router-link>
    <router-link class="col-xs-12" :to="{}">
      <span>购买记录</span>
      <div class="i">
        <span>开发票</span> <i class="iconfont1">&#xe643;</i>
      </div>
    </router-link>
    </section>

</template>

<script>
  export default {
    name: "Membership",
    methods:{
      get(){
        window.history.go(-1)
      }
    }
  }
</script>

<style scoped>
  .iconfont{
    font-family:"iconfont" !important;
    font-size:0.26rem;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    float:left;
    color: white;
  }
  .iconfont1{
    font-family:"iconfont" !important;
    font-size:0.2rem;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    color: gray;
  }
  .iconfont3{
    font-family:"iconfont" !important;
    font-size:0.12rem;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    color: orangered;
  }
  .iconfont2{
    font-family:"iconfont" !important;
    font-size:0.4rem;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    color: cornflowerblue;
    float:left ;
  }
  .head{
    width: 100%;
    height: 0.5rem;
    background-color: blue;
    line-height:0.5rem ;
    font-size: 0.2rem;
  }
  .head span{
    color: white;
  }
  .Kjk{
    width: 100%;
    height: 0.5rem;
    background-color: lightgray;
    line-height: 0.5rem;
    text-indent: 0.2rem;
  }
  .i{
    float: right;
  }
  .col-xs-12{
    height: 0.5rem;
    line-height: 0.5rem;
    border-bottom: 0.005rem solid lightgray;
    margin-bottom: 0.2rem;
  }
  .col-xs-12 span{
    color: black;
  }
  .i span{
    color: gray;
  }
  .sOne{
    border-bottom: 0.005rem solid lightgray;
    padding-bottom: 0.2rem;
  }
  .sTwo{
    margin-top: 0.2rem;
    padding-bottom: 0.2rem;
    border-bottom:0.08rem solid lightgray ;
  }
  .sOne i{
    margin-left: 0.1rem;
    margin-right: 0.1rem;
  }
  .sTwo i{
    margin-left: 0.1rem;
    margin-right: 0.1rem;
  }
  .kai{
    width: 100%;
    height: 0.4rem;
    line-height: 0.4rem;
    border-bottom:0.005rem solid lightgray ;
  }
  .kai p{
    margin-left: 0.1rem;
  }
  .btn{
    color: orangered;
    border: 0.01rem solid orangered;
    border-radius: 10%;
    width: 0.6rem;
    height: 0.3rem;
    float: right;
    margin-top:0.15rem;
    background-color: white;
  }
  .yue{
    width: 100%;
    height: 0.6rem;
    line-height: 0.6rem;
    padding-bottom: 0.6rem;
    border-bottom: 0.1rem solid lightgray;
  }
  .oneS{
    margin-left:0.1rem;
  }
</style>
